<div nz-row>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>表单名称</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <input nz-input [(ngModel)]="formName"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>描述</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <input nz-input [(ngModel)]="formDesc"/>
    </nz-form-control>
  </nz-form-item>
</div>

<div nz-row style="display: flex">
  <button nz-button nzType="primary" nzSize="large" (click)="addFormElement()">
    <em nz-icon nzType="plus-circle" nzTheme="outline"></em>新增控件
  </button>
  <button nz-button nzType="default" nzSize="large" style="margin-left: auto" (click)="openPreviewModal()">
    <em nz-icon nzType="eye" nzTheme="outline"></em>预览模板
  </button>
</div>

<div nz-row style="min-height: 45vh">
  <nz-table #nzTable [nzData]="fields" [nzShowPagination]="false">
    <thead>
    <tr>
      <th></th>
      <th>表单模板名称</th>
      <th>控件类型</th>
      <th>必填</th>
      <th>样式布局</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-template ngFor let-data let-i="index" [ngForOf]="nzTable.data">
      <tr>
        <td style="width: 2vw">
          <button nz-button nzType="default" nzShape="circle" nzSize="small"
                  (click)="elementUp(i)" class="move-button-margin" *ngIf="i!==0">
            <em nz-icon nzType="up" nzTheme="outline"></em>
          </button>
          <button nz-button nzType="default" nzShape="circle" nzSize="small"
                  (click)="elementDown(i)" class="move-button-margin" *ngIf="i!==nzTable.data.length-1">
            <em nz-icon nzType="down" nzTheme="outline"></em>
          </button>
        </td>
        <td>{{ data.name }}</td>
        <td>{{ data.type | formItemTypePipe }}</td>
        <td>{{ data.required | booleanFormatterPipe }}</td>
        <td>{{ data | formItemWidthPipe }}</td>
        <td>
          <button nz-button nzType="default" (click)="openEditDrawer(data)">修改</button>
          <button nz-button nzType="danger">删除</button>
        </td>
      </tr>
      <tr [nzExpand]="mapOfExpandData[data.id]">
        <td></td>
        <td colspan="3">{{ data.description }}</td>
      </tr>
    </ng-template>
    </tbody>
  </nz-table>
</div>

<div nz-row style="display: flex;justify-content: flex-end">
  <button nz-button nzSize="large" nzType="primary" (click)="saveForm()">
    <em nz-icon nzType="save" nzTheme="outline"></em>保存
  </button>
</div>
